@for (alert of service.alerts$ | async; track i; let i = $index) {
  <div
    class="alert alert-{{ alert.type }} fade show"
    [ngClass]="{ 'alert-dismissible fade show': alert.dismissible }"
    role="alert"
  >
    @if (alert.title) {
      <h4
        class="alert-heading"
        [innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams"
      ></h4>
    }
    <span
      [innerHTML]="alert.message | abpSafeHtml | abpLocalization: alert.messageLocalizationParams"
    ></span>
    @if (alert.dismissible) {
      <button
        type="button"
        class="btn-close"
        data-dismiss="alert"
        aria-label="Close"
        (click)="service.remove(i)"
      ></button>
    }
  </div>
}
